<template>
	<view class="shop_add_addr">
		<u-navbar title="新增地址" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="uname">
			<text>收货人</text>
			<input v-model="aname" type="text">
		</view>
		<view class="uphone">
			<text>手机号码</text>
			<input v-model="aphone" type="number">
		</view>
		<view class="uaddr1" @click="show=true">
			<text>所在地区</text>
			<input v-model="aaddr1" type="text">
		</view>
		<view class="uaddr2">
			<text>详细地址</text>
			<input v-model="aaddr2" type="text">
		</view>
		<view class="is_nor">
			<text>是否设置为默认</text>
			<view class="nor_btn" :class="flat?'active':''">
				<view @click="flat=!flat" class="is_btn" :class="flat?'active':''">

				</view>
			</view>

		</view>
		<view class="add_addr">
			<view class="btn" @click="addAddr">
				保存
			</view>
		</view>
		<u-picker :show="show" ref="uPicker" confirmColor="#ff78a2" :columns="columns" @confirm="confirm"
			@change="changeHandler"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				aname: "张三",
				aphone: "1888888888",
				aaddr1: "广东省茂名市",
				aaddr2: "电白区小良镇",
				flat: false,
				columns: [
					[
						"北京市",
						"重庆市",
						"福建省",
						"江苏省",
						"广东省",
						"辽宁省",
						"内蒙古",
						"山西省",
						"青海省",
						"四川省",
						"贵州省",
						"云南省",
						"陕西省",
						"西藏",
						"宁夏",
						"新疆",
						"广西",
						"海南省",
						"湖南省",
						"湖北省",
						"河南省",
						"山东省",
						"江西省",
						"安徽省",
						"浙江省",
						"上海市",
						"黑龙江省",
						"吉林省",
						"甘肃省",
						"天津市",
						"河北省",
					],
					["北京市"],
				],
				columnData: [

					["北京市"],


					["重庆市"],
					[
						"漳州市",
						"厦门市",
						"三明市",
						"泉州市",
						"莆田市",
						"宁德市",
						"南平市",
						"龙岩市",
						"福州市"
					],
					[
						"镇江市",
						"张家港市",
						"扬州市",
						"盐城市",
						"徐州市",
						"宿迁市",
						"无锡市",
						"泰州市",
						"苏州市",
						"南通市",
						"南京市",
						"连云港市",
						"淮安市",
						"常州市",
					],
					[
						"珠海市",
						"中山市",
						"肇庆市",
						"湛江市",
						"云浮市",
						"阳江市",
						"深圳市",
						"韶关市",
						"汕尾市",
						"汕头市",
						"清远市",
						"梅州市",
						"茂名市",
						"揭阳市",
						"江门市",
						"惠州市",
						"河源市",
						"广州市",
						"佛山市",
						"东莞市",
						"潮州市",
					],
					[
						"营口市",
						"铁岭市",
						"沈阳市",
						"盘锦市",
						"辽阳市",
						"锦州市",
						"葫芦岛市",
						"阜新市",
						"抚顺市",
						"丹东市",
						"大连市",
						"朝阳市",
						"本溪市",
						"鞍山市",
					],
					[
						"兴安盟",
						"锡林郭勒盟",
						"乌兰察布市",
						"乌海市",
						"通辽市",
						"呼伦贝尔市",
						"呼和浩特市",
						"鄂尔多斯市",
						"赤峰市",
						"包头市",
						"巴彦淖尔市",
						"阿拉善盟",
					],
					[
						"长治市",
						"运城市",
						"阳泉市",
						"忻州市",
						"太原市",
						"朔州市",
						"吕梁市",
						"临汾市",
						"晋中市",
						"晋城市",
						"大同市",
					],
					[
						"西宁市",
						"海东市",
						"海西蒙古族藏族自治州",
					],
					[
						"自贡市",
						"资阳市",
						"宜宾市",
						"雅安市",
						"遂宁市",
						"攀枝花市",
						"内江市",
						"南充市",
						"绵阳市",
						"眉山市",
						"泸州市",
						"凉山州",
						"凉山彝族自治州",
						"乐山市",
						"广元市",
						"广安市",
						"甘孜藏族自治州",
						"德阳市",
						"达州市",
						"成都市",
						"巴中市",
						"阿坝藏族羌族自治州",
					],
					[
						"贵阳市",
						"遵义市",
						"铜仁市",
						"黔西南布依族苗族自治州",
						"黔南布依族苗族自治州",
						"黔东南苗族侗族自治州",
						"六盘水市",
						"毕节市",
						"安顺市",
					],
					[
						"昭通市",
						"玉溪市",
						"西双版纳傣族自治州",
						"文山壮族苗族自治州",
						"曲靖市",
						"普洱市",
						"临沧市",
						"丽江市",
						"昆明市",
						"红河哈尼族彝族自治州",
						"德宏傣族景颇族自治州",
						"大理白族自治州",
						"楚雄彝族自治州",
						"保山市",
					],
					[
						"榆林市",
						"延安市",
						"咸阳市",
						"西安市",
						"渭南市",
						"铜川市",
						"商洛市",
						"汉中市",
						"宝鸡市",
						"安康市",
					],
					[
						"咸阳市",
						"拉萨市",
					],
					[
						"银川市",
						"吴忠市",
						"石嘴山市",
						"固原市",
					],
					[
						"乌鲁木齐市",
						"阿拉尔市",
						"伊犁哈萨克自治州",
						"五家渠市",
						"吐鲁番市",
						"石河子市",
						"克拉玛依市",
						"喀什地区",
						"和田地区",
						"哈密市",
						"昌吉回族自治州",
						"巴音郭楞蒙古自治州",
						"阿克苏地区",
					],
					[
						"玉林市",
						"梧州市",
						"钦州市",
						"南宁市",
						"柳州市",
						"来宾市",
						"贺州市",
						"河池市",
						"桂林市",
						"崇左市",
						"北海市",
						"百色市",
					],
					[
						"文昌市",
						"三亚市",
						"琼海市",
						"海口市",
					],
					[
						"株洲市",
						"长沙市",
						"张家界市",
						"岳阳市",
						"永州市",
						"益阳市",
						"湘西土家族苗族自治州",
						"湘潭市",
						"邵阳市",
						"娄底市",
						"怀化市",
						"衡阳市",
						"郴州市",
						"常德市",
					],
					[
						"宜昌市",
						"孝感市",
						"襄阳市",
						"咸宁市",
						"仙桃市",
						"武汉市",
						"天门市",
						"随州市",
						"十堰市",
						"潜江市",
						"荆州市",
						"荆门市",
						"黄石市",
						"黄冈市",
						"恩施土家族苗族自治州",
						"鄂州市",
					],
					[
						"驻马店市",
						"周口市",
						"郑州市",
						"许昌市",
						"信阳市",
						"新乡市",
						"商丘市",
						"三门峡市",
						"濮阳市",
						"平顶山市",
						"南阳市",
						"漯河市",
						"洛阳市",
						"开封市",
						"焦作市",
						"济源市",
						"鹤壁市",
						"安阳市",
					],
					[
						"淄博市",
						"枣庄市",
						"烟台市",
						"潍坊市",
						"威海市",
						"泰安市",
						"日照市",
						"青岛市",
						"临沂市",
						"聊城市",
						"莱芜市",
						"济宁市",
						"济南市",
						"菏泽市",
						"东营市",
						"德州市",
						"滨州市",
					],
					[
						"鹰潭市",
						"宜春市",
						"新余市",
						"上饶市",
						"萍乡市",
						"南昌市",
						"九江市",
						"景德镇市",
						"吉安市",
						"赣州市",
						"抚州市",
					],
					[
						"宣城市",
						"宿州市",
						"芜湖市",
						"铜陵市",
						"马鞍山市",
						"六安市",
						"黄山市",
						"淮南市",
						"淮北市",
						"合肥市",
						"阜阳市",
						"滁州市",
						"池州市",
						"亳州市",
						"蚌埠市",
						"安庆市",
					],
					[
						"舟山市",
						"温州市",
						"台州市",
						"绍兴市",
						"衢州市",
						"宁波市",
						"丽水市",
						"金华市",
						"嘉兴市",
						"湖州市",
						"杭州市",
					],
					[
						"上海市"
					],
					[
						"伊春市",
						"绥化市",
						"双鸭山市",
						"齐齐哈尔市",
						"七台河市",
						"牡丹江市",
						"佳木斯市",
						"鸡西市",
						"黑河市",
						"鹤岗市",
						"哈尔滨市",
						"大兴安岭地区",
						"大庆市"
					],
					[
						"长春市",
						"延边朝鲜族自治州",
						"通化市",
						"松原市",
						"四平市",
						"辽源市",
						"吉林市",
						"白山市",
						"白城市"
					],
					[
						"张掖市",
						"武威市",
						"天水市",
						"庆阳市",
						"平凉市",
						"陇南市",
						"临夏州",
						"兰州市",
						"酒泉市",
						"金昌市",
						"嘉峪关市",
						"甘南藏族自治州",
						"定西市",
						"白银市",
					],

					[
						"天津市"
					],
					[
						"张家口市",
						"邢台市",
						"唐山市",
						"石家庄市",
						"秦皇岛市",
						"廊坊市",
						"衡水市",
						"邯郸市",
						"承德市",
						"沧州市",
						"保定市"
					],
				],

			};
		},

		methods: {
			addAddr() {
				// console.log(123)
				uniCloud.callFunction({
					name: "user_add_addr",
					data: {
						uid: uni.getStorageSync("_id"),
						aname: this.aname,
						aphone: this.aphone,
						aaddr1: this.aaddr1,
						aaddr2: this.aaddr2,
						aflat: this.flat
					}
				}).then((res) => {
					console.log(res)
					uni.showToast({
						title: "添加成功"
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
				console.log(this.flat)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e.value)
				this.show = false
				if (e.value[0] == e.value[1]) {
					this.aaddr1 = e.value[0]
				} else {
					this.aaddr1 = e.value[0] + e.value[1]
				}
			},
		}
	}
</script>

<style lang="scss">
	.is_btn {
		height: 20px;
		width: 20px;
		background-color: #ff78a2;
		border-radius: 50%;
		margin-top: 1px;
		transition: .3s;

		&.active {
			background-color: white;
			transform: translateX(19px);
		}
	}

	.nor_btn {
		background-color: white;
		width: 40px;
		height: 22px;
		border-radius: 22px;
		transition: .3s;

		&.active {
			// transform: translateX(20px);
			background-color: #ffa9a9;
		}
	}

	.add_addr {
		height: 60px;
		width: 100%;


		.btn {
			margin: 8px 10px;
			height: 44px;
			background-color: white;
			background: linear-gradient(to left, #ff78a2, #ffa5a5);
			border-radius: 22px;
			text-align: center;
			line-height: 44px;
			color: white;

		}
	}


	.shop_add_addr {

		height: 100vh;
		background-color: #f3f2f2;

		.uname {
			margin: 55px 20px 0;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 15px;
			font-weight: 700;

			input {
				margin-left: 10px;
				padding: 10px;
				background-color: white;
				width: 230px;
				border-radius: 10px;
				font-weight: 400;
			}
		}

		.uphone,
		.uaddr1,
		.uaddr2,
		.is_nor {
			font-size: 15px;
			font-weight: 700;
			margin: 10px 20px 0;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: space-between;


			input {
				font-weight: 400;
				margin-left: 10px;
				padding: 10px;
				background-color: white;
				width: 230px;
				border-radius: 10px;
			}
		}
	}
</style>